<template>
  <div>
    <!--[if lt IE 9]>
    <div class="alert alert-danger topframe" role="alert">你的浏览器实在<strong>太太太太太太旧了</strong><a
      target="_blank" class="alert-link" href="http://browsehappy.com">立即升级</a></div><![endif]-->
    <el-row >
      <el-col v-if="!readOnly" :span="4" style="">
        <div class="left">
          <tree v-if="!readOnly"></tree>
        </div>
      </el-col>
      <el-col :span="readOnly?24:20" class="right">
        <div id="drawArea">
          <draw-area :readOnly="readOnly"></draw-area>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" src="./style/stepsIcon.scss"></style>
<style scoped lang="scss">
  @import "./style/variables.scss";
  .el-row {
    height: 100%;
  }
  .el-col {
    height: inherit;
    > div {
      box-sizing: border-box;
      background-color: $background-color;
      border: 1px solid darkgrey;
      border-right:0
    }
  }
  .left {
    min-width: 150px;
    height: inherit;
    padding: 15px 25px 10px 15px;
    overflow-y: auto;
  }

  #drawArea {
    height: inherit;
    position: relative
  }
  </style>
<script>
  import tree from './view/LeftTreeView.vue';
  import drawArea from './view/DrawAreaView.vue';

  export default {
    name: 'app',
    mounted(){
      //根据传入的cookie参数，确认是否只读
      let reg = new RegExp("(^| )readOnly=([^;]*)(;|$)"), result = document.cookie.match(reg);
      this.readOnly = !!(result && result[2] == '1');
    },
    components: {drawArea, tree},
    data(){
      return {readOnly: false}
    }
  }
</script>
